<template>
  <div class="icons">
    <swiper ref="mySwiper" :options="swiperOption">
      <swiper-slide v-for="item in page" :key="item.id">
        <div class="icons-item" v-for="page in item" :key="page.id">
          <img :src="page.imgUrl" />
          <p>{{ page.title }}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "icons",
  props:['iconsList'],
  data() {
    return {
      swiperOption: {}
    };
  },
  computed: {
    page() {
      let pages = [];
      this.iconsList.forEach((item, index) => {
        let idx = Math.floor(index / 8);
        if (!pages[idx]) pages[idx] = [];
        pages[idx].push(item);
      });
      return pages;
    },
  },
};
</script>

<style scoped lang="stylus">
@import '~css/common.styl';
.icons {
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.icons-item {
  width: 25%;
  height: 0;
  padding-bottom: 25%;
  float: left;
}
.icons-item img {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  margin: 0 auto;
  padding-top: 0.2rem;
  border-radius: 60%;
}
.icons-item p {
  font-size: 0.28rem;
  text-align: center;
  color: #212121;
  margin-top: 0.1rem;
  textOverflow()
}
</style>